<template>
  <view class="main">
    <a-card id="login-pane">
      <a-form id="login-form" :form="form" @submit="forgotPassword">
        <a-form-item>
          <a-input v-decorator="['account', { rules: [{ required: true, message: '请输入账号!' }] }]"
                   placeholder="账号">
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-decorator="['password',{ rules: [{ required: true, message: '请输入昵称!' }] }]"
                   placeholder="昵称">
          </a-input>
        </a-form-item>
        <view style="margin: 10px 10px 0px; display: flex; justify-content: space-between; width: 100%">
          <a-button type="primary" class="logon-button" @click="toLogin">返回</a-button>
          <a-button type="primary" html-type="submit" class="logon-button">查询</a-button>
        </view>
      </a-form>
    </a-card>
  </view>
</template>

<script>
export default {
  name: "forgotpassword",
  methods: {
    forgotPassword(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
    toLogin() {
      uni.navigateTo({
        url: 'login'
      })
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {name: 'register'});
  },
}
</script>

<style>
page {
  background-color: #2E62CD;
}

.main {
  padding: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#login-pane {
  border: none;
  margin-top: 50px;
  width: 300px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(224, 243, 248, 0.1);
  border-radius: 5px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
}

#login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /*justify-content: center;*/
}

.login-button {
  width: 100px;
}
</style>